<template>
  <view class="page">
    <view class="flex justify-center my-48rpx" @click="handleUpdateAvatar">
      <u-avatar size="160rpx" :src="avatar" />
    </view>
    <u-cell-group>
      <u-cell
        v-for="item in showUserInfo"
        :key="item.key"
        :title="item.name"
        :value="item.value"
      />
    </u-cell-group>
  </view>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

import { userStore } from '@/store/modules'

@Component({
  name: 'Userinfo'
})
export default class Userinfo extends Vue {
  get avatar() {
    return userStore.authUserInfo.miniUser?.avatar
  }

  get showUserInfo() {
    const { realname, mobile, idCard } =
      userStore.authUserInfo.loginUserInfo ?? {}
    return [
      {
        key: 'realName',
        name: '姓名',
        value: realname
      },
      {
        key: 'idNo',
        name: '身份证号码',
        value: idCard
      },
      {
        key: 'mobile',
        name: '手机号码',
        value: mobile
      }
    ]
  }

  async handleUpdateAvatar() {
    console.log('ok')
    // if (uni.getUserProfile && !userStore.userInfo.avatar) {
    //   if (!userStore.userInfo.staffId) return
    //   try {
    //     const { userInfo } = await toPromise(uni.getUserProfile, {
    //       desc: '更新我的主页个人资料（头像）',
    //       lang: 'zh_CN'
    //     })
    //     if (userInfo.avatarUrl) {
    //       await updateMyInfo({
    //         avatar: userInfo.avatarUrl,
    //         id: userStore.userInfo.staffId
    //         // userId: this.userInfo.userId
    //       })
    //       await userStore.getAuthUserInfo()
    //     }
    //   } catch (e) {
    //     console.log(e)
    //   }
    // }
  }
}
</script>
